<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>
			body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
	</head>
	<body>
		<table class="layui-hide" id="demo" lay-filter="test"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" style="color: orangered; background-color: gainsboro; font-weight: bold;">远程控制</a>
<!--  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
</script>

		<div class="layui-tab layui-tab-brief" lay-filter="demo">
			<div class="layui-tab-content">

				<div class="layui-tab-item">
					<div id="laydateDemo"></div>
				</div>
				<div class="layui-tab-item">
					<div id="pageDemo"></div>
				</div>

			</div>
		</div>

		<script src="../../../layui/layui.js"></script>
		<script>
			layui.config({
				version: '1572350921010' //为了更新 js 缓存，可忽略
			});

			layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function() {
				var laydate = layui.laydate //日期
					,
					laypage = layui.laypage //分页
					,
					layer = layui.layer //弹层
					,
					table = layui.table //表格
					,
					carousel = layui.carousel //轮播
					,
					upload = layui.upload //上传
					,
					element = layui.element //元素操作
					,
					slider = layui.slider //滑块


				//监听Tab切换
				element.on('tab(demo)', function(data) {
					layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
						tips: 1
					});
				});

				//执行一个 table 实例
				table.render({
					elem: '#demo',
					height: 400,
					url: '../../data/deviState.json' //数据接口
						,
					title: '用户表',
					page: false //开启分页
						,
					cols: [
						[ //表头
							{
								type: 'checkbox',
								fixed: 'left'
							}, {
								field: 'id',
								title: 'ID'
							}, {
								field: 'username',
								title: '设备名称'
							}, {
								field: 'manufacturers',
								title: '设备状态'
							}, {
								field: 'position',
								title: '厂家'
							}, {
								field: 'longitude',
								title: '更新时间'
							}
							/*,{field: 'latitude', title: '事由' } 
							,{field: 'sign', title: '审批人'}
							,{field: 'videoname', title: '进入时间'}
							,{field: 'createTime', title: '出入时间'} */
							, {
								fixed: 'right',
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					]
				});

				//监听头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id),
						data = checkStatus.data; //获取选中的数据
					switch (obj.event) {
						case 'add':
							layer.msg('添加');
							break;
						case 'update':
							if (data.length === 0) {
								layer.msg('请选择一行');
							} else if (data.length > 1) {
								layer.msg('只能同时编辑一个');
							} else {
								layer.alert('编辑 [id]：' + checkStatus.data[0].id);
							}
							break;
						case 'delete':
							if (data.length === 0) {
								layer.msg('请选择一行');
							} else {
								layer.msg('删除');
							}
							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
						,
						layEvent = obj.event; //获得 lay-event 对应的值
					if (layEvent === 'detail') {
						layer.msg('查看操作');
					} else if (layEvent === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if (layEvent === 'edit') {
						layer.msg('编辑操作');
					}
				});

				//执行一个轮播实例
				carousel.render({
					elem: '#test1',
					width: '100%' //设置容器宽度
						,
					height: 200,
					arrow: 'none' //不显示箭头
						,
					anim: 'fade' //切换动画方式
				});

				//将日期直接嵌套在指定容器中
				var dateIns = laydate.render({
					elem: '#laydateDemo',
					position: 'static',
					calendar: true //是否开启公历重要节日
						,
					mark: { //标记重要日子
						'0-10-14': '生日',
						'2018-08-28': '新版',
						'2018-10-08': '神秘'
					},
					done: function(value, date, endDate) {
						if (date.year == 2017 && date.month == 11 && date.date == 30) {
							dateIns.hint('一不小心就月底了呢');
						}
					},
					change: function(value, date, endDate) {
						layer.msg(value)
					}
				});
				//底部信息
				var footerTpl = lay('#footer')[0].innerHTML;
				lay('#footer').html(layui.laytpl(footerTpl).render({}))
					.removeClass('layui-hide');
			});

		</script>
		<div class="box">
			<img src=""  style="width: 100%; height: 100%;" id="img">
		</div>
	</body>
	<script>
		layui.use(['layer', 'jquery'], function() {
			let $ = layui.jquery;
			let layer = layui.layer;
			let url = decodeURI(window.location.href);
			
			let argsIndex = url.split("?img=");
			//console.log(argsIndex[1]);
			let name = $.get("img");
			
			let img = $('#img')
			img.attr("src",argsIndex[1])
			
		})
	</script>
</html>
